<!--
 * @Author: 刘十三
 * @Date: 2023-12-28 11:18:14
 * @LastEditors: 刘十三
 * @LastEditTime: 2024-03-15 10:50:42
 * @FilePath: \FJ-dev-1.3.1\dev\pages\query\specialArea\components\caseRecordList.vue
 * @Description: 监管对象查询-特殊区域查询-检查记录列表 （改造，2024-03-08）节日快乐
-->

<template>
  <view>
    <me-table :i="0" :index="0" :load-data="loadData" :top="0" :init-load="false" ref="mescrollItem0" :height="height">
      <view slot-scope="d" class="list-item-root list-lay">
        <view class="item">
          <view class="list">
            <view class="top-part">
              <view class="part-left">
                <view>
                  <image class="img-size" src="/static/case/icon-item.png"></image>
                  <text class="title-text">
                    {{ d.data.caseCode }}
                  </text>
                </view>
              </view>
              <view class="part-right">
                <view>￥{{ $u.test.isEmpty(d.data.caseTotalVal) ? "0.0" : d.data.caseTotalVal }}</view>
              </view>
            </view>
            <view class="addr-bt">
              <view class="item-time">案发时间：{{ $u.test.isEmpty(d.data.caseDate) ? "未录入" : d.data.caseDate }}</view>
              <view class="part-right-type">
                <u-tag :text="`查获条数：${$u.test.isEmpty(d.data.caseTotalQty) ? 0 : d.data.caseTotalQty}`" mode="light" type="primary" border-color="#ffffff"></u-tag>
              </view>
            </view>
            <view class="addr-bt">
              <view class="item-time">立案时间：{{ $u.test.isEmpty(d.data.regTime) ? "未录入" : d.data.regTime }}</view>
            </view>
            <view class="addr-lay">
              <u-tag :text="`行政处罚决定时间： ${$u.test.isEmpty(d.data.punishDecideDate) ? '未录入' : d.data.punishDecideDate}`" mode="light" type="info" border-color="#ffffff"></u-tag>
              <u-tag :text="`当事人：${$u.test.isEmpty(d.data.party) ? '未录入' : d.data.party}`" mode="light" type="info" border-color="#ffffff"></u-tag>
            </view>
            <view class="bottom-part">
              <view class="item-reason">
                <text>立案部门名称：</text>
                {{ $u.test.isEmpty(d.data.regDeptName) ? "未录入" : d.data.regDeptName }}
              </view>
              <view class="item-reason">
                <text>案件名称：</text>
                {{ $u.test.isEmpty(d.data.caseName) ? "未录入" : d.data.caseName }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </me-table>
    <u-popup v-model="searchVisable" width="80%" mode="right">
      <view class="cearch_title">
        查询条件
      </view>
      <u-form :model="serachForm" label-position="top" label-width="auto" style="padding: 80rpx 32rpx 0 32rpx" ref="uForm">
        <template v-if="searchVisable">
          <u-form-item label="检查开始日期:" prop="startDate">
            <z-date placeholder="请选择" v-model="serachForm.startDate" />
          </u-form-item>
          <u-form-item label="检查结束日期:" prop="endDate">
            <z-date placeholder="请选择" v-model="serachForm.endDate" />
          </u-form-item>
        </template>
      </u-form>
      <view class="submit-btns btn-other-cls">
        <u-button plain class="del" type="primary" @tap="handleRest">
          重置
        </u-button>
        <u-button class="mit" type="primary" @tap="selectChange">
          确定
        </u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import meTable from "@/components/me-table.vue";
import certificateService from "@/service/certificate/certificate.service.js";
import { ZDate } from "@/components";

export default {
  name: "caseRecordList",
  components: {
    meTable,
    ZDate,
  },
  mixins: [MescrollMoreMixin],
  props: {
    height: {
      // 高度
      type: String,
      default: "0px",
    },
    areaUuid: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      serachForm: {
        startDate: "",
        endDate: "",
      },
      searchVisable: false,
    };
  },
  methods: {
    handleRest() {
      this.serachForm = {
        startDate: "",
        showViolation: 0,
        endDate: "",
      };
    },
    selectChange() {
      if (this.serachForm.startDate && this.serachForm.endDate) {
        if (new Date(this.serachForm.startDate) > new Date(this.serachForm.endDate)) {
          return this.$u.toast("检查开始日期不能大于检查结束日期");
        }
      }
      this.searchVisable = false;
      this.handleReferList();
    },
    handleReferList() {
      let mescroll = this.getMescroll(0);
      mescroll && mescroll.triggerDownScroll();
    },
    loadData(paper) {
      let param = {
        page: paper.num,
        limit: paper.size,
        areaUuid: this.areaUuid,
        ...this.serachForm,
      };
      return new Promise((resolve, reject) => {
        certificateService
          .getInvolvedDetail(param)
          .then((res) => {
            if (res.success && res.code == 0) {
              let array = [];
              res.data.forEach((element) => {
                if (element) {
                  array.push(element);
                }
              });
              resolve({
                count: res.count,
                data: [...array],
              });
            } else {
              resolve({
                count: 0,
                data: [],
              });
            }
          })
          .catch((e) => {
            resolve({
              count: 0,
              data: [],
            });
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list-lay {
  background-color: #fff;
  padding: 5px 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}
.list {
  width: 100%;
  height: auto;
  background-color: $uni-bg-color;
}

.img-size {
  width: 32rpx;
  height: 36rpx;
  vertical-align: middle;
}

.title-text {
  vertical-align: middle;
  font-weight: 600;
  font-size: 36rpx;
  margin-left: 20rpx;
}

.top-part {
  display: flex;
  justify-content: space-between;
}

.middle-btns {
  display: inline-block;
  width: auto;
  margin: 16rpx 4rpx;
  pointer-events: none;
  background-color: $uni-bg-color-grey;
  background-color: $u-type-info-light;
  border-color: $u-type-info-light;
}

.item-reason {
  color: $uni-text-color;
  font-size: 28rpx;
  padding-bottom: 8px;
  font-family: "微软雅黑", sans-serif;
  :nth-child(n + 1) {
    margin-top: 20rpx;
  }
  uni-text {
    color: $cm-form-right-icon-color;
  }
}

.item-time {
  color: $u-type-info-dark;
  font-size: 26rpx;
  font-family: "微软雅黑", sans-serif;
}

.part-right {
  font-size: 30rpx;
  font-weight: 600;
  color: $u-type-warning;
}
.part-right-type {
  font-size: 30rpx;
  font-weight: 400;
  margin-top: 20rpx;
  color: $font-color-spec;
  flex-shrink: 0;
}
.part-right-quick {
  color: white;
  padding: 5rpx 10rpx;
  width: 50rpx;
  margin-left: 15rpx;
  border-radius: 50%;
  text-align: center;
  background-color: $u-type-error;
}

.addr-bt {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

.addr-lay {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-grow: 1;
  align-items: top;
  margin: 16rpx 0;
  font-size: 24rpx;
  :nth-child(n) {
    margin: 5rpx 0;
  }
  :last-child {
    margin-left: 16rpx;
  }
}
.cearch_title {
  background-color: #f3f4f5;
  width: 100%;
  height: 82rpx;
  font-size: 32rpx;
  font-weight: 600;
  padding: 22rpx 0 21rpx 32rpx;
  z-index: 999;
  position: fixed;
}
</style>
